<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="dark light" />
    <title>Сложно сосредоточиться</title>
    <link rel="icon" href="./images/favicon.ico" sizes="any" />
    <link rel="icon" href="./images/favicon.svg" type="image/svg+xml" />
    <link rel="icon" href="./images/mobile-icon.png" type="image/png" />
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/globals.css" />
    <link rel="stylesheet" href="./styles/variables.css" />
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/dark.css" />
    <link rel="stylesheet" href="./styles/light.css" />
  </head>
  <body class="page">
    <header class="header decorated-zone">
      <span class="header__lamp" aria-hidden="true">rec</span>
      <nav class="header__theme-menu">
        <ul class="header__theme-menu-list">
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_light"
            >
              День
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_auto"
              disabled
            >
              Авто
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_dark"
            >
              Неон
            </button>
          </li>
        </ul>
      </nav>
      <h1 class="header__title">no focus</h1>
      <div class="header__content">
        <p class="header__text title-decor">
          Что делать, когда не можешь делать ничего<br />Или почему нам так
          сложно сконцентрироваться, особенно когда очень надо
        </p>
      </div>
    </header>
    <main class="main">
      <section class="section">
        <h2 class="section__title">Почему сосредоточиться так сложно</h2>
        <div class="section__content">
          <article class="article">
            <h3 class="article__title title-decor">Многозадачность</h3>
            <p class="article__content">
              Особенно сложно сосредоточиться, когда задач много и все они —
              важные. Где же легендарная многозадачность, когда она так нужна
              вам (и всем нанимающим менеджерам этого мира)? А дело в том, что
              её просто не существует. Исследователи
              <a
                class="link"
                href="https://dana.org/article/multicosts-of-multitasking/"
                >выяснили</a
              >, что мозгу тяжело концентрироваться даже на двух делах
              одновременно. А когда в поле внимания попадает несколько важных
              задач, организм паникует и выделяет кортизол и адреналин —
              «гормоны стресса». Из-за этого мы работаем невнимательно:
              ошибаемся и быстро устаём.
            </p>
          </article>
          <article class="article">
            <h3 class="article__title title-decor">Дофамин</h3>
            <p class="article__content">
              С гормонами стресса всё понятно, но дальше — ещё интереснее. В
              нашей невозможности сосредоточиться замешана и полная
              противоположность стрессу — дофамин. Это вещество участвует в
              системе вознаграждения мозга. Причём тут он? Мы часто отвлекаемся
              от важной задачи на что-то более «приятное» для мозгов. Например,
              смотрим лайки в соцсетях. В это время и выделяется дофамин — и мы
              чувствуем удовольствие. Получается замкнутый круг: чем больше
              отвлекаешься, тем больше удовольствия получаешь.
            </p>
          </article>
        </div>
      </section>
      <section class="section">
        <h2 class="section__title">Что снижает концентрацию внимания?</h2>
        <div class="section__content">
          <article class="article">
            <h3 class="article__title title-decor">Многозадачность</h3>
            <p class="article__content">
              Как концентрация может снижаться из-за… концентрации? Любая
              стрессовая ситуация (и резко меняющийся мир в целом) заставляет
              наш мозг постоянно «сканировать» окружающую среду на предмет
              опасности. Например, читать новости вместо работы. Но быть
              собранными всё время — невозможно. Концентрация — мышца, и она
              может не выдержать, если не давать ей отдохнуть.
            </p>
          </article>
          <article class="article">
            <h3 class="article__title title-decor">Еда</h3>
            <p class="article__content">
              «Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно
              доставляют в мозг энергию и помогают ему лучше работать. Но уходит
              эта энергия также быстро, как и приходит. А мы в результате
              попадаем на «углеводные качели»: как только действие «быстрых
              углеводов» заканчивается, мы чувствуем усталость и сонливость. И
              хотим ещё больше быстрых углеводов.
            </p>
          </article>
          <article class="article">
            <h3 class="article__title title-decor">Гаджеты</h3>
            <p class="article__content">
              Да-да, это та самая ситуация, когда на экране ноутбука — код, в
              наушниках — подкаст, а на компьютере фоном — ещё и видео с
              забавными утятами. В результате мозг пытается переключиться с
              одной задачи на другую — и просто не может. А чтобы вернуться к
              состоянию полной концентрации, человеку в среднем нужно 20 минут.
              Вот и получается, что чем больше времени мы проводим в гаджетах,
              тем больше времени затем нужно, чтобы вернуться к работе.
            </p>
          </article>
        </div>
      </section>
      <section class="section">
        <h2 class="section__title">
          Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх
          секунд)
        </h2>
        <div class="section__content">
          <h3 class="section__subtitle title-decor">
            5 простых (на самом деле не очень) советов
          </h3>
          <article class="article">
            <h4 class="article__title title-thin title-decor">
              Представьте небо и облака
            </h4>
            <p class="article__content">
              Или листья в ручье. Тут дело в лёгкой медитации, которая помогает
              успокоиться. Ведь часто именно тревожные мысли о сложных задачах
              как раз и мешают эти сложные задачи делать. В такие моменты можно
              закрыть глаза и представить, что чистое небо — это вы, а облака —
              тревожные мысли. И сколько бы их ни было — ясное небо всегда будет
              где-то там, за тучами, и никуда не денется. Это упражнение поможет
              вернуться в настоящий момент, а не волноваться о потенциальных
              проблемах из будущего.
            </p>
          </article>
          <article class="article">
            <h4 class="article__title title-thin title-decor">
              Включите музыку
            </h4>
            <p class="article__content">
              Но не любую, и не любимую. Любимая может быть связана с сильными
              положительными эмоциями, которые тоже очень сильно отвлекают.
              Подойдёт тихая, спокойная, умеренно-ритмичная. Можно вообще
              попробовать включить плейлист в «белым шумом» или нейромузыкой.
            </p>
          </article>
          <article class="article">
            <h4 class="article__title title-thin title-decor">Прогуляйтесь</h4>
            <p class="article__content">
              Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
              <a
                class="link"
                href="https://www.sciencedirect.com/science/article/abs/pii/S0272494415000328"
                >показал</a
              >, что созерцание природы повышает концентрацию, в то время как
              после просмотра городских пейзажей она наоборот понижается. Можно
              совместить прогулку с физическими упражнениями или бегом — так в
              мозг поступит ещё больше кислорода и он будет лучше работать. Но и
              простая двадцатиминутная прогулка — тоже отличный вариант.
            </p>
          </article>
          <article class="article">
            <h4 class="article__title title-thin title-decor">Хорошо ешьте</h4>
            <p class="article__content">
              Мы — не ваша бабушка, но это правда важно. Выбирайте продукты,
              которые препятствуют резким скачкам сахара в крови. Например, с
              высоким содержанием клетчатки: овощи, ягоды, бобовые (нут,
              чечевица, фасоль), коричневый рис, хлеб из цельнозерновой пшеницы.
            </p>
          </article>
          <article class="article">
            <h4 class="article__title title-thin title-decor">Читайте</h4>
            <p class="article__content">
              Настоящие бумажные книги. Это правда помогает с концентрацией:
              чтобы прочитать пост в соцсети, достаточно нескольких минут или
              даже секунд. А вот интересная книга способна затянуть и на
              несколько часов и круто тренирует направленное внимание.
            </p>
          </article>
        </div>
      </section>
      <section class="section section-gallery">
        <h2 class="section__title title-decor">А можно в картинках?</h2>
        <div class="gallery">
          <img
            class="gallery__picture gallery__picture-sunset"
            src="./images/sunset.png"
            alt="закат"
            loading="lazy"
          />
          <img
            class="gallery__picture gallery__picture-ice-cream"
            src="./images/ice-cream.png"
            alt="мороженое"
            loading="lazy"
          />
          <img
            class="gallery__picture gallery__picture-tape"
            src="./images/tape.png"
            alt="кассета"
            loading="lazy"
          />
          <img
            class="gallery__picture gallery__picture-books"
            src="./images/books.png"
            alt="книжки"
            loading="lazy"
          />
          <img
            class="gallery__picture gallery__picture-street"
            src="./images/street.png"
            alt="улица"
            loading="lazy"
          />
        </div>
      </section>
    </main>
    <footer class="footer decorated-zone">
      <h2 class="footer__title">focus</h2>
    </footer>
    <script src="./scripts/script.js"></script>
  </body>
</html>
